<template>
	<view class="x-main-content">
		<u-navbar bgColor="#fff" :fixed="true" leftIconColor="#333" leftIconSize="42rpx" autoBack placeholder
			title="我的就诊人">
		</u-navbar>
		<view class="classifyWrap">
			<radio-group>
				<view class="administrator" v-for="(item,index) in patientsList" :key="index">
					<view class="content_item_left" v-if="control=='search.vue'">
						<radio size="13px" color="#2979ff" shape="circle" :value="item.id"
							:checked="item.id == radioValue" @click="radioCheck(item)"></radio>
					</view>
					<view class="content_item_right" @click="chooseFn(item)">
						<view class="information">
							<view>
								<text class="name">{{item.name}}</text>
								<image v-show="item.sex == '女'" src="../../../static/icon/girl.png" mode=""></image>
								<image v-show="item.sex == '男'" src="../../../static/icon/boy.png" mode=""></image>
								<text class="little" style="margin-left: 10rpx;">{{item.age + '岁'}}</text>
							</view>
							<text class="little">{{item.phone.replace(/^(.{3})(?:\d+)(.{4})$/,"$1******$2")}}</text>
						</view>
					</view>
					<view class="content_item_end" @click="goEdit(item)">
						<image src="../../../static/icon/edit.png" mode=""></image>
					</view>
				</view>
				<view
					style="font-size: 24rpx;color: lightslategray;margin-top: 30rpx;letter-spacing: 1px;padding-left: 20rpx;"
					v-if="patientsList.length">
					(提示：人数最大上限为4)
				</view>
			</radio-group>
		</view>
		<view class="btn-box">
			<view class="btn" @click="addNewPatient">
				新增就诊人
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioValue: '',
				control: '',
				patientsList: []
			}
		},
		onLoad(e) {
			this.control = e.data
		},
		onShow() {
			this.getPatientsList()
		},
		created() {},
		methods: {
			leftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			chooseFn(item){
				this.$store.commit('SET_PATIENT', item)
				this.$nextTick(() => {
					uni.$emit('patients', item)
					uni.navigateBack({
						delta: 1
					});
				})
			},
			radioCheck(item) {
				if (this.control == 'search.vue') {
					// this.$store.commit('SET_PATIENT', item)
					this.$nextTick(() => {
						uni.navigateBack({
							delta: 1
						});
					})
				}
			},
			addNewPatient() {
				if (this.patientsList.length == 4) {
					uni.showModal({
						title: '提示',
						content: '陪诊人信息数量已达上限!'
					})
				} else {
					let code = 'add'
					uni.navigateTo({
						url: "/pages/business/addNewPatient?data=" + encodeURIComponent(JSON.stringify(code))
					})
				}
			},
			async getPatientsList() {
				const data = {
					id: uni.getStorageSync('userId')
				}
				let res = await this.$request('/api/applet/visitorAccompany', data, 'GET')
				this.patientsList = res.data.data
				if (this.patientsList.length == 0) {
					uni.showModal({
						title: '提示',
						content: '您还未添加就诊人信息，是否前往添加？',
						success: res => {
							if (res.confirm) {
								let code = 'add'
								uni.navigateTo({
									url: "/pages/business/addNewPatient?data=" +
										encodeURIComponent(JSON.stringify(code))
								})
							}
							if (res.cancel) {
								return
							}
						}
					})
				}
			},
			goEdit(ctx) {
				uni.navigateTo({
					url: '/pages/business/addNewPatient?data=' + encodeURIComponent(JSON.stringify(
						ctx)),
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.x-main-content {
		padding: 0 30rpx;
	}

	.administrator {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		height: 50px;
		margin-top: 10px;
		border-radius: 9px;
		padding: 30rpx;

		.content_item_right {
			flex: 1;

			.information {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				// padding: 8px 0;
				.name {
					font-size: 16px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					letter-spacing: 2px;
					display: inline-block;
					width: 200rpx;
				}

				.marginright {
					margin-left: 30px;
				}

				.little {
					font-size: 13px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #6F7DA2;
					letter-spacing: 1px;
					margin-top: 10px;
				}

				image {
					width: 15px;
					height: 15px;
				}
			}
		}

		.content_item_end {
			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.btn-box {
		width: 100%;
		position: fixed;
		bottom: 60rpx;
		left: 0;
		display: flex;
		justify-content: center;

		.btn {
			padding: 12rpx 0;
			background-color: #386fff;
			font-size: 28rpx;
			color: #fff;
			border-radius: 30rpx;
			letter-spacing: 1px;
			width: 600rpx;
			text-align: center;
		}
	}

	/deep/.uni-radio-input {
		width: 15px;
		height: 15px;
	}
</style>